<template>
    <!-- 
        https://element.eleme.cn/#/zh-CN/component/tabs
        el-tabs             标签页       
            type	        风格类型（card/border-card）
            closable	    标签是否可关闭
            tab-remove	    点击 tab 移除按钮后触发
            tab-click       点击 tab 触发
        el-tab-pane         标签页面板
            label	        选项卡标题
            name	        与选项卡绑定值 value 对应的标识符，表示选项卡别名(唯一)

        默认：
        {
            name: 'Main'            
            title: '首页',
        }  
        动态：
        {
            name: 'User'
            title: '用户管理',
        }    
    -->
    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
        <el-tab-pane label="首页" name="Main"> </el-tab-pane>
        <el-tab-pane v-for="(item) in editableTabs" :key="item.name" :label="item.title" :name="item.name"> </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    name: 'Common-tab',
    data() {
        return {
            // editableTabsValue: this.$store.state.menus.editableTabsValue,
            // editableTabs: this.$store.state.menus.editableTabs,
        }
    },
    computed: {
        // 选项卡需要实时监听，因此使用computed，废弃data的处理
        editableTabs: {
            get() {
                return this.$store.state.menus.editableTabs
            },
            set(val) {
                this.$store.state.menus.editableTabs = val
            },
        },
        editableTabsValue: {
            get() {
                console.info('当前页：', this.$store.state.menus.editableTabsValue, '----------------------')
                return this.$store.state.menus.editableTabsValue
            },
            set(val) {
                this.$store.state.menus.editableTabsValue = val
            },
        },
    },
    methods: {
        /**
         * 废弃，迁移至store的menus的addTab中
         */
        // addTab(targetName) {
        //     console.warn("废弃，请使用 this.$store.commit('addTab','xxx')")
        // },
        /**
         * 标签删除按钮触发
         */
        removeTab(targetName) {
            let tabs = this.editableTabs
            let activeName = this.editableTabsValue

            // 首页不可删除逻辑
            if (targetName === 'Main') {
                this.$message('首页不可关闭')
                return
            }

            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1]
                        if (nextTab) {
                            activeName = nextTab.name
                        } else {
                            // 当所有的tabs都被关闭，在选中默认的首页（Main）
                            activeName = 'Main'
                        }
                    }
                })
            }

            this.editableTabsValue = activeName
            this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
            // 通过name切换
            this.$router.push({ name: activeName })
        },
        /**
         * 标签点击触发路由主体切换
         */
        clickTab(target) {
            // 通过name切换
            this.$router.push({ name: target.name })
        },
    },
}
</script>
